<template>
    <!-- 当前组件的 DOM 结构， 需要定制到template标签的内部 -->
    <div class="test-box">
        <h3>这是用户自定义的 Test.vue -----{{ username }}</h3>
        <button @click="changeName">按钮事件</button>
    </div>
</template>

<script>

// 默认导出，固定写法
export default {
    // data数据源
    // 注意： .vue组价中的data不能和之前一样， 不能指向对象，.vue中的data必须是一个函数
    
    // 错误写法 ：data: {username: 'zs' }
    //正确写法：
    data() {
        return {
            username: 'zs'
        }
    },
    methods: {
        // 在组件中， this就表示当前组件的实例对象
        changeName() {
            console.log(this);
            this.username = '玩哈哈'
        }
    }
}

</script>

<!--  如果css需要使用less语言来写， 需要指定属性 lang="less"  该属性默认值css-->
<style lang="less">
.test-box {
    background-color: red;

    h3 {
        color: white;
    }
}
</style>
